<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="cu-list menu">
				<view class="cu-item arrow">
					<view class="content">
						<!-- <text class="cuIcon-circlefill text-grey"></text> -->
						<text class="text-grey">省市</text>
					</view>
					<view class="action">
						<uni-citys :city="area" @cityPicker='cityPicker'></uni-citys>
						</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">本年度社平工资</text>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="10" v-model="basePay"
						placeholder="请输入" placeholder-class="placeholder" />
						</view>
				</view>
				<!-- <view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">性别</text>
					</view>
					<view class="action">
						<picker @change="sexChange" :value="sexIndex" :range="sexPicker">
							<view class="picker input">
								{{sexIndex>-1?sexPicker[sexIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view> -->
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">目前年龄（周岁）</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="4" v-model="age"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">预计退休年龄（周岁）</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('性别为男只能选选择60岁退休，如是特殊工种可选55岁；性别为女只能选55岁或50岁退休，如是特殊工种可选45岁或50岁退休')"></image>
					</view>
					<view class="action">
						<picker @change="ageChange" :value="ageIndex" :range="agePicker">
							<view class="picker input">
								{{ageIndex>-1?agePicker[ageIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">实际已缴费年限（年）</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="4" v-model="feeAge"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">年度平均缴纳工资指数（%）</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('实际缴纳社保的基数与当地月平均工资的比值，“年度平均缴纳工资指数”即是所缴纳年限的缴纳工资指数的平均值')"></image>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="5" v-model="baseRate" 
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">上年末个人帐户储存额（元）</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('可以从自己的社保帐号上查询获得')"></image>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="15" v-model="baseMonye"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
			</view>
			<view class="text-red" style="margin: 15px;">注：以下为预测信息，实际情况以统计局公布为准</view>
			<view class="cu-list menu" style="height: 100px;margin-top: 20px;">
				
				<view class="cu-item ">
					
					<view class="content">
						<text class="text-grey">未来年度社平工资增长率（%）</text>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="5" v-model="payRate"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">未来年度平均缴纳工资指数（%）</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('实际缴纳社保的基数与当地月平均工资的比值，“年度平均缴纳工资指数”即是所缴纳年限的缴纳工资指数的平均值')"></image>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="5" v-model="futrueRate"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item bottom">
					<view class="content">
						<view class="cu-btn round bg-blue" @tap="getResult()">查看测算结果</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				
				<view class="cu-list menu text-left solid-top" style="height: 350px;margin: 0;">
					<view class="cu-item">
						<view class="content">
							<view class="text-blue" style="justify-content: center;">养老金测算结果</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<view class="text-black">退休时间</view>
						</view>
						<view class="action"><text class="text-black text-sm">{{resultData.retire_age}}年</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-black">您每月的基本养老金</text>
						</view>
						<view class="action"><text class="text-black text-sm">约{{resultData.amount}}元</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey">基础养老金</text>
						</view>
						<view class="action"><text class="text-grey text-sm">约{{resultData.basic_pension}}元</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey">个人养老金</text>
						</view>
						<view class="action"><text class="text-grey text-sm">约{{resultData.personal_pension}}元</text></view>
					</view>
					<view class="cu-item " style="margin-top: 20px;">
						<view class="content">
						<view class="text-red">测算结果只作参考</view>
						<view class="cu-btn bg-blue round recount" style="margin: 0 15%;width: 70%;">重新测算</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 绑定 -->
	<goReg 
		ref="goReg" 
		:contentHeight="580"
	></goReg>
	<!-- 全局message组件 -->
	<quick-message ref="message"></quick-message>
	</view>
</template>

<script>
	import uniCitys from '@/components/citys-picker/uni-citys.vue';
	import goReg from "@/components/goReg";
	export default {
		components: {
			uniCitys,
			goReg,
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				sexIndex:-1,
				sexPicker: ['男', '女'],
				ageIndex:-1,
				agePicker: ['45', '50','55', '60','65','70'],
				area:'请选择',
				basePay:'',
				payRate:'',
				futrueRate:'',
				feeAge:'',
				age:'',
				baseRate:'',
				baseMonye:'',
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				resultData:'',
			};
		},
		methods: {
			// getResult(){
			// 	this.modalName = 'gridModal';
			// },
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			sexChange(e) {
				this.sexIndex = e.detail.value
			},
			ageChange(e) {
				this.ageIndex = e.detail.value
			},
			showInfo(msg){
				 this.$refs.message.show({
					type:'default', //String 默认default
					msg:msg, //String 显示内容 *
					direction:'center', //String 默认顶部显示
					icon:false, //Boolean|String 显示icon(false/true/string 默认显示icon)
					mask:true, //Boolean 遮罩（默认false没有遮罩）
					// time:5000, //Number|Boolean 默认3000/false为不自动关闭
					customStyle:{ //自定义样式
							color:'#FFFFFF', //字体图标色
							backgroundColor:'rgba(0,0,0,.5)' //背景色
					}, 
					iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
					iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
				})
				// uni.showToast({
				// 	title:msg,
				// 	icon:'none',
				// 	duration: 2000
				// })
			},
			openAddres() {
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				// this.pickerText = JSON.stringify(e);
				let labelArr = e.labelArr;
				let city = labelArr[1]=="市辖区"?labelArr[0]:labelArr[1];
				this.area = city;
				console.log(e )
			},
			async getResult(){
				// let uId = uni.getStorageSync('userId');
				let uId =1
				if(uId>"0"&&uId!=undefined){
					let errMsg = '';
					if(this.ageIndex<0)errMsg = '请选择预计退休年龄';
					if(this.feeAge<=0)errMsg = '请填写实际已缴费年限';
					if(this.baseRate<=0)errMsg = '请填写年度平均缴纳工资指数';
					if(this.baseMonye<=0)errMsg = '请填写上年末个人帐户储存额';
					if(this.payRate<=0)errMsg = '请填写未来年度社平工资增长率';
					if(this.futrueRate<=0)errMsg = '请填写未来年度平均缴纳工资指数';
					if(this.age<=0)errMsg = '请填写当前年龄';
					if(this.basePay<=0)errMsg = '请填写本年度社平工资';
					if(this.area=='')errMsg = '请选择当前城市';
					if(errMsg){
						uni.showToast({
							title:errMsg,
							icon:'none',
						});
						return;
					}
					let param = {
						city:this.area,
						// social_ratio:'0.08',
						average_wage:this.basePay,
						// gender:this.sexIndex,
						age:this.age,
						retire_age:this.agePicker[this.ageIndex],
						actual_paid:this.feeAge,
						average_pay:this.baseRate*0.01,
						account_deposit:this.baseMonye,
						future_wage_rate:this.payRate*0.01,
						future_average_pay:this.futrueRate*0.01,
						};
					 
					// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
					let data = await this.$http.post(
						'oldPension', //可以直接放链接(将不启用全局定义域名)
						param, 
					);
					this.resultData = data;
					console.log(data);
					this.modalName = 'gridModal';
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			cityPicker(val){
				this.area=val.city;
				this.basePay=parseFloat(val.average_wage);
			},
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
		background: #F6F6F6;
		
		
	}
	.cu-btn{
		height: 80rpx ;
		width: 80%;
		margin: 0 10%;
		box-shadow: 0px 3px 6px #4CA5FE;
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 10px;
		background: transparent;
		margin-left: -10px;
		padding: 0;
		
	}
	.cu-list{
		height: 375px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 1;
		border-radius: 10px;
		margin: 20px 10px;
		
	}
	.content>image{
		width: 15px !important;
		height: 12px;
	}
	.input{
		text-align: right;
		font-size: 12px;
		max-width: 70px;
	}
	.page.show {
		overflow: hidden;
	}
	.recount{
		width: 100%;
		margin-bottom: 5px;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
